<template>
  <div class="importEdit">
    <!-- 导入数据修改弹窗 -->
    <el-dialog
      title="编辑"
      :visible.sync="dialogVisible"
      width="50%"
      :show-close="false"
      :before-close="closeDailog"
    >
      <FormContainer :column="2">
        <el-form ref="formData" :model="formData" :rules="formRules" label-width="80px">
          <el-form-item :span="12" prop="customerName" label="客户姓名">
            <el-input v-model="formData.customerName" placeholder="请输入客户姓名" clearable />
          </el-form-item>
          <el-form-item :span="12" prop="customerPhone" label="联系电话">
            <el-input v-model="formData.customerPhone" placeholder="请输入联系电话" clearable />
          </el-form-item>
          <el-form-item prop="remarks" label="备注1">
            <el-input v-model="formData.remarks1" placeholder="请输入备注" clearable />
          </el-form-item>
          <el-form-item prop="remarks" label="备注2">
            <el-input v-model="formData.remarks2" placeholder="请输入备注" clearable />
          </el-form-item>
          <el-form-item prop="remarks" label="备注3">
            <el-input v-model="formData.remarks3" placeholder="请输入备注" clearable />
          </el-form-item>
          <el-form-item prop="remarks" label="备注4">
            <el-input v-model="formData.remarks4" placeholder="请输入备注" clearable />
          </el-form-item>
          <el-form-item prop="remarks" label="备注5">
            <el-input v-model="formData.remarks5" placeholder="请输入备注" clearable />
          </el-form-item>
        </el-form>
      </FormContainer>
      <span slot="footer" class="dialog-footer">
        <Button :loading="loading" @click="closeDailog">取消</Button>
        <Button type="primary" @click="confrim">保存</Button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import FormContainer from '@/components/FormContainer'
import Button from '@/components/Button'
export default {
  name: 'ImportEdit',
  components: {
    FormContainer,
    Button
  },
  item: {
    type: Object,
    defaul: () => {
      return {}
    }
  },
  data() {
    return {
      dialogVisible: false,
      loading: false,
      formData: {},
      formRules: {
        customerName: {
          required: true,
          message: '请输入客户名称',
          trigger: 'blur'
        },
        customerPhone: {
          required: true,
          message: '请选择联系电话',
          trigger: 'change'
        }
      }
    }
  },
  methods: {
    // 打开弹窗
    openDailog(data) {
      this.dialogVisible = true
      if (data) {
        this.formData = JSON.parse(JSON.stringify(data))
      }
    },
    closeDailog() {
      this.dialogVisible = false
    },
    // 确定按钮
    confrim() {
      this.$emit('confirm', this.formData)
      this.closeDailog()
    }
  }
}
</script>
<style lang='scss' module>
</style>
